<template>
  <div class="title">
    <p>欢迎登录</p>
  </div>
  <van-form @submit="onSubmit">
    <van-field class="formOperation" v-model="formData.mobile" name="手机号" placeholder="请输入手机号码" />
    <van-field v-model="formData.password" :type="formData.passwordType" name="密码" placeholder="请输入密码">
      <template #right-icon>
        <span class="solts" @click="switchPasswordType">
          <van-icon name="eye" v-if="formData.passwordType === 'password'" />
          <van-icon name="closed-eye" v-else />
        </span>
      </template>
    </van-field>
    <van-row justify="space-between">
      <van-col span="8" offset="2" @click="this.$router.push('/register')">注册账号</van-col>
      <van-col span="8" offset="2" @click="this.$router.push('/foreget')">忘记密码</van-col>
    </van-row>
    <van-checkbox v-model="formData.checked" checked-color="#37dc6d" class="policy mt150">
      <div class="isAggressDiv">
        我已阅读并同意
        <span @click="openAgreement(1)">《用户协议》</span>
        <span @click="openAgreement(2)">《隐私政策》</span>
      </div>
    </van-checkbox>
    <van-button type="primary" class="block_gradual" :loading="formData.loading" native-type="submit">立即登录</van-button>
    <van-button type="primary" class="block_btn" to="/Codelogin" block>手机验证登录</van-button>
  </van-form>
  <privacy-policy :agreementData="agreementData" />
</template>
<script>
import { defineComponent, reactive, computed, onMounted } from 'vue'
import { Toast } from "vant";
import { useRouter } from 'vue-router'
import { setLocal } from "@/utils/localStorage";
import { loginByPassword } from "@/api/user";
import privacyPolicy from '@/components/privacyPolicy'
import { processDev } from '@/utils/env'
import versions from "@/utils/versions";
export default defineComponent({
  components: {
    privacyPolicy
  },
  setup() {
    const router = useRouter()
    const formData = reactive({
      mobile: "",
      password: "",
      checked: true,
      passwordType: "password",
      loading: false,
    })
    const agreementData = reactive({
      status: false,
      type: 1
    })
    const openAgreement = (type) => {
      agreementData.status = true
      agreementData.type = type
    }
    const switchPasswordType = () => {
      formData.passwordType = formData.passwordType === 'password' ? 'text' : 'password'
    }
    const onSubmit = () => {
      if (!formData.checked) {
        Toast("请勾选我已阅读并同意《用户协议》《隐私政策》");
        return
      } else if (!formData.password) {
        Toast("请输入密码！");
        return
      }
      formData.loading = true
      loginByPassword(formData).then(res => {
        if (res.data.success) {
          var token = res.data.data.token;
          localStorage.setItem("token", token)
          localStorage.setItem('tel', res.data.data.user.mobile)
          router.replace('/me')
        } else {
          Toast(res.data.message);
        }
        formData.loading = false
      })
    }
    const isApp = computed(() => {
      return processDev
    })

    return {
      formData,
      switchPasswordType,
      onSubmit,
      isApp,
      openAgreement, agreementData
    }
  },
})
</script> 
<style lang="less" scoped>
.title {
  font-size: 36px;
  color: #ffffff;
  line-height: 48px;
  margin: 40px 60px 0px;
}

.policy {
  // position: fixed;
  // bottom: 50px;
  display: flex;
  align-items: center;

  &:deep(.van-checkbox__icon) {
    width: 24px;
    height: 24px;
    font-size: 24px !important;
    line-height: 40px;
    margin-block: 5px;
  }

  .van-checkbox {
    margin-top: 60px;
  }
}

.block_gradual {
  margin-top: 20px !important;
}

.block_btn {
  background: transparent;
  border: none;
  font-size: 28px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.6;
  text-align: center;
  display: block;
  margin: 0 auto;
}

.isAggressDiv {
  font-size: 28px;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.6;

  span {
    font-size: 28px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #37dc6d;
    background: linear-gradient(-90deg, #37dc6d 0%, #34d1f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

// &:deep(.van-field) {
// }
.foreget-wrap {
  display: flex;
  justify-content: flex-end;
  margin: 0.5rem 0px;
  color: #ffffff;

  span {
    display: flex;
  }
}

.van-form {
  margin-top: 60px;
  padding: 0 60px;

  .van-row {
    font-size: 28px;
    font-weight: 400;
    color: #ffffff;
    line-height: 48px;
  }
}

.mt150 {
  margin-top: 150px !important;
}
</style>